
<template>
    <v-container>
        <Breadcrumb>
            <SecondFunc 
            :title="title"
            :formConfig="formConfig"
            :initialData="initialData"
            @optSave="saveData"
            />
        </Breadcrumb>

        <dynamic-table
            :title="title"
            :data="data"
            :columns="columns"
            @optEdit="editData"
            @optDel="delData"
            @optSave="saveData"
        />
    </v-container>
    
</template>

<script setup>
import { ElMessage } from 'element-plus';
import DynamicTable from '@/components/common/dynamicTable/index.vue';
import Breadcrumb from '@/components/common/breadcrumb/index.vue';
import SecondFunc from '@/components/common/secondFunc/index.vue';
import { getMenuList, delMenu, queryMenu, createMenu, updateMenu } from '@/api';
import { changeIsShowCreateButton, changeCommonId, changeCurLabel } from '@/assets/js/common'
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { useStore } from 'vuex'


const title = ref('menu')
let store = useStore()
let data = ref([])
let columns = ref([
    { prop:"id", label:"ID", dataKey:"id", width:"auto"},
    { prop:"name", label:"名称", dataKey:"name", width:"auto"},
    { prop:"name_zh", label:"中文", dataKey:"name", width:"auto"},
    { prop:"icon", label:"图标", dataKey:"icon", width:"auto"},
    { prop:"type", label:"类型", dataKey:"type", width:"auto"},
    { prop:"path", label:"路径", dataKey:"path", width:"auto"},
    { prop:"desc", label:"描述", dataKey:"desc", width:"auto"},
    // { prop:"color", label:"背景", dataKey:"color", width:80},
    { prop:"rank", label:"优先级", dataKey:"rank", width:"auto"},
    // { prop:"margin", label:"外边距", dataKey:"margin", width:80},
    // { prop:"scale", label:"尺寸", dataKey:"scale", width:80},
    { prop:"state", label:"状态", dataKey:"state", width:"auto"},
    { prop:"is_root", label:"根节点", dataKey:"is_root", width:"auto"},
])
let formConfig = ref([
    {
        label: '名称',
        name: 'name',
        ktype: "input",
        styleSet: ''
    },{
        label: '中文名称',
        name: 'name_zh',
        ktype: "input",
        styleSet: ''
    },{
        label: '图标',
        name: 'icon',
        ktype: 'select',
        options: [
            {label: "House", value: "House" },
            {label: "Document", value: "Document" },
            {label: "Files", value: "Files" },
            {label: "User", value: "User" },
            {label: "ChatDotSquare", value: "ChatDotSquare" },
            {label: "Menu", value: "Menu" },
            {label: "Setting", value: "Setting" },
            {label: "Folder", value: "Folder" },
        ],
        styleSet: ''
    },{
        label: '路径',
        name: 'path',
        ktype: 'input',
        styleSet: ''
    },{
        label: '描述',
        name: 'desc',
        ktype: 'input',
        styleSet: ''
    },{
        label: '优先级',
        name: 'rank',
        ktype: 'input',
        styleSet: ''
    },{
        label: '背景',
        name: 'color',
        ktype: 'input',
        styleSet: ''
    },{
        label: '大小',
        name: 'scale',
        ktype: 'input',
        styleSet: ''
    },{
        label: '外边距',
        name: 'margin',
        ktype: 'input',
        styleSet: ''
    },{
        label: '子菜单',
        name: 'child_node',
        ktype: 'input',
        styleSet: ''
    },{
        label: '根节点',
        name: 'is_root',
        ktype: 'switch',
        styleSet: ''
    },{
        label: '状态',
        name: 'state',
        ktype: 'switch',
        styleSet: ''
    }
])
let initialData = ref({})


onMounted(()=>{
    changeCurLabel("菜单管理")
    queryList()
})

function queryList() {
    try {
        getMenuList().then((res)=>{
            data.value = res.data
        })
    } catch (error) {
        console.log("request error:", error)
    }
}

function saveData(saveData){
    if (store.getters.getIsEdit){
        updateMenu(saveData).then(()=>{
            ElMessage({
                title: "Update " + title.value,
                type: "primary",
                message: '更新成功'
            })
        })
    } else {
        createMenu(saveData).then(()=>{
            ElMessage({
                title: "Create " + title.value,
                type: "success",
                message: '创建成功'
            })
        })
    }
    queryList()
}

function editData(id) {
    try{
        changeCommonId(id)
        queryMenu({id: id}).then(resp => {
            let res = resp.data
            if ( res ) {
                for (var i=0; i<Object.keys(res).length; i++) {
                    initialData.value[Object.keys(res)[i]] = res[Object.keys(res)[i]]
                }
            }
        })
    } catch (error) {
        console.log("request error:", error)
    }
}

function delData(id) {
    if (confirm('确定要删除这个记录么吗？')){
        try {
            delMenu({id: id}).then(()=>{
                queryList()
                ElMessage({
                    title: "Delete " + title.value,
                    type: "warning",
                    message: '删除成功'
                })
            })
        } catch (error) {
            console.error('Error deleting api:', error)
        }
    } 
}
</script>

